import styles from './index.module.scss';
import { Button, Form, Input, message } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import { request } from '../../../utils/request';
import { routes } from '../../../routes';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const btnLogin = async (values) => {
    const { username, password } = values;
    const res = await request('/admin/login', {
      method: 'POST',
      pureData: false,
      data: {
        username,
        password
      }
    }).catch(e => {
      message.error(e);
    });
    if (res?.code === '1') {
      message.success('登录成功');
      localStorage.setItem('token', res.data);
      console.log(123222);
      navigate(routes.ADMIN_HOME);
      return;
    }
    message.error(res.desc);
  };

  return (
    <div className={styles.bg}>
      <div className={styles.container}>
        <Form style={{ width: '100%' }} onFinish={btnLogin} form={form}>
          <FormItem
            rules={[{ required: true, message: '请输入账号名/邮箱' }]}
            name={'username'}
            className={styles.input}>
            <Input size={'large'} placeholder={'请输入账号名/邮箱'} />
          </FormItem>
          <FormItem
            rules={[{ required: true, message: '请输入密码' }]}
            name={'password'}
            className={styles.input} required={true}>
            <Input size={'large'} placeholder={'请输入密码'} type={'password'} />
          </FormItem>

          <Button style={{ marginTop: '-20px' }} onClick={() => {
            navigate(routes.ADMIN_FIND_PASSWORD);
          }} type={'link'}>找回密码</Button>

          <FormItem>
            <Button size={'large'} style={{ width: '100%' }} htmlType={'submit'} type={'primary'}>立即登录</Button>
          </FormItem>
        </Form>
        <label style={{ fontSize: '14px', color: '#8c8c8c' }}>没有店铺？
          <span onClick={() => navigate(routes.ADMIN_REGISTER)}
                style={{ color: '#3768fa', cursor: 'pointer' }}>0元开店</span></label>
      </div>
    </div>
  );
};
export default Login;